@import "../style/flex.wxss";
.red-envelope-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  .close-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .reminder-wrapper {
    position: relative;
    width: 750rpx;
    height: 716rpx;
    color: #fff;
    box-sizing: border-box;

    .title {
      font-size: 60rpx;
      color: #fffdc5;
    }

    .time {
      margin-top: 100rpx;
      font-size: 240rpx;
      color: #fffdc5;
    }

  }
  .rain-wrapper {
    width: 100%;
    height: 100%;
    background-image: url('https://imgs.solui.cn/weapp/redBacketBG.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .time-info {
      position: absolute;
      top: 80rpx;
      left: 45rpx;
      font-size: 24rpx;
      color: #fff;
      .progress-wrapper {
        position: relative;
        height: 16rpx;
        width: 240rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        border-radius: 16rpx;
        background: #fff;
        overflow: hidden;
        .progress {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 240rpx;
          border-radius: 16rpx;
          background: #fe2e00;
          z-index: 1;
        }
      }
      .total-score{
        font-size:40rpx;
      }
    }
    .canvas-wrapper {
      position: relative;
      .score-change {
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        font-size: 40rpx;
        color: #fffdc5;
        opacity: 0;
      }
    }
  }
  .result-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
       .group-content {
        position: relative;
        width: 550rpx;
        height: 700rpx;
        background-image: url("https://imgs.solui.cn/weapp/l-rain-gold@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .result-title {
          margin-top: 50rpx;
          font-size: 40rpx;
          color: #ffffff;
        }
         .money-wrapper {
          margin-top: 56rpx;
          color: #fff;
          .money {
            font-size: 120rpx;
          }
          .unit {
            position: relative;
            top: 34rpx;
            font-size: 32rpx;
          }
        }
        .result-btn {
          margin-top: 158rpx;
          width: 300rpx;
          height: 70rpx;
          background-color: #fff9e8;
          text-align: center;
          line-height: 70rpx;
          border-radius: 40rpx;
          font-size: 30rpx;
          color: #b10000;
        }
      }
    }
}
  